import { defineStore } from "pinia";
import { reactive, toRefs } from "vue";
import { GlobalState } from "../interface";
import { DEFAULT_PRIMARY } from "../../config";
import piniaPersistConfig from "../../config/piniaPersist";

export const useGlobalStore = defineStore("wocwin-global", () => {
  // 修改默认值之后，需清除 localStorage 数据
  const state = reactive<GlobalState>({
    // 布局模式 (纵向：vertical | 经典：classic | 横向：transverse | 分栏：columns)
    layout: "vertical",
    // element 组件大小
    assemblySize: "default",
    // 当前系统语言
    language: "zh",
    // 当前页面是否全屏
    maximize: false,
    // 主题颜色
    primary: DEFAULT_PRIMARY,
    // 深色模式
    isDark: false,
    // 灰色模式
    isGrey: false,
    // 色弱模式
    isWeak: false,
    // 侧边栏反转 (默认为 false，明亮模式下使用浅色侧边栏)
    asideInverted: false,
    // 折叠菜单
    isCollapse: false,
    // 面包屑导航
    breadcrumb: true,
    // 面包屑导航图标
    breadcrumbIcon: true,
    // 标签页
    tabs: true,
    // 标签页图标
    tabsIcon: false,
    // 页脚
    footer: true,
    // 水印
    isWatermark: true,
    // 菜单列表数据
    menuList: []
  });

  // Set GlobalState
  const setGlobalState = <K extends keyof GlobalState>(key: K, val: GlobalState[K]) => {
    state[key] = val;
  };

  return {
    ...toRefs(state),
    setGlobalState
  };
}, {
  persist: piniaPersistConfig("wocwin-global")
});
